<!--
 * @Author: @yzcheng
 * @Date: 2021-02-27 11:00:56
 * @Version: 1.0
 * @LastEditors: @yzcheng
 * @Description: 
 * @LastEditTime: 2021-03-10 11:05:49
-->
<template>
  <el-form
    :model="form"
    status-icon
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
  >
    <el-form-item :label="$t('flowDefine.table.flowType')" prop="id">
      <el-select
        v-model="form.id"
        :placeholder="$t('validate.pleaseChoose', [$t('form.state')])"
      >
        <el-option
          v-for="(item, index) in FlowPageData.records"
          :key="index"
          :label="item.flowName"
          :value="item.id"
          >{{ item.flowName }}</el-option
        >
      </el-select>
    </el-form-item>
    <el-form-item :label="$t('flowDefine.table.flowName')" prop="id">
      <el-select
        v-model="form.id"
        :placeholder="
          $t('validate.pleaseFirstChoose', [$t('flowDefine.table.flowType')])
        "
      >
        <el-option
          v-for="(item, index) in FlowPageData.records"
          :key="index"
          :label="item.flowName"
          :value="item.id"
          >{{ item.flowName }}</el-option
        >
      </el-select>
    </el-form-item>
    <el-form-item class="form_item_flex" label-width="0px">
      <el-button type="primary" @click="performDeploymentProcess(form)">
        <i class="el-icon-check"></i>{{$t('flowDefine.deployment')}}</el-button
      >
      <el-button @click="close"> <i class="el-icon-close"></i>{{$t('common.close')}}</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "modal",
  data() {
    return {
      form: { id: "" },
    };
  },
  computed: {
    ...mapState("flowDefineStore", ["FlowPageData"]),
  },
  methods: {
    ...mapActions("flowDefineStore", ["performDeploymentProcess"]),
    close() {
      this.$emit("close");
    },
    submitForm() {},
  },
};
</script>

<style lang="scss" scoped>
   .form_item_flex{
     display: flex;
     justify-content: center;
   }
</style>